<template>
  <div id="panoBox"></div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import apiMaterial from '@/api/modules/material'
import type { MaterialDetail } from '@/api/modules/material'
import axios from 'axios';

const props = defineProps({
  materialId: {
    type: Number,
    default: 0
  }
})

const materialDetail = ref<MaterialDetail>();


const loadPaon = async (krpano, data) => {
  const res = await axios.get(`/krpano/index.xml`);
  const x2js = new X2JS();
  const jsonXml = x2js.xml2json(res.request.responseXML);
  jsonXml.krpano.preview = { _url: data.PathPreview + 'preview.jpg' };
  jsonXml.krpano.image = {
    cube: {
      _url: data.PathPreview + "pano_%s.jpg",
    }
  }
  console.log(jsonXml)
  const xml = x2js.json2xml_str(jsonXml);
  krpano.call(`loadxml(${xml})`);
}

const buildKrp = (data) => {
  /* eslint-disable */
  // @ts-ignore
  embedpano({
    id: "krpanoPanoBox",
    xml: null,
    target: 'panoBox',
    html5: "only+webgl+preserveDrawingBuffer",
    mobilescale: 1.0,
    passQueryParameters: false,
    consolelog: true,
    // @ts-ignore
    onready: (krpano) => {
      // @ts-ignore
      loadPaon(krpano, data)
    }
  });
  // @ts-check
  /* eslint-enable */
}

const getMaterialDetail = async () => {
  try {
    const { data } = await apiMaterial.detail({ MaterialId: props.materialId });
    materialDetail.value = data.data;
    buildKrp(data.data)
  } catch (e) {
    console.error(e)
  }
}
getMaterialDetail();




</script>

<style scoped>
#panoBox {
  width: 600px;
  height: 400px;

}
</style>